<template>
  <el-tabs
    v-if="hasTabs"
    v-model="activeName"
    @tab-click="handleTabChange"
    type="card"
  >
    <el-tab-pane
      v-for="(tab, index) in tabs"
      :key="index"
      :label="tab.label"
      :name="tab.name"
    >
      <div v-if="tab.content" class="tab-content">
        <el-row :gutter="24">
          <el-col :span="1"> </el-col>
          <el-col :span="10" style="display: flex">
            <div class="title-text">温度:</div>
            <span class="content-text"> {{ tab.content.temperature }} ℃ </span>
          </el-col>
          <el-col :span="11" style="display: flex">
            <div class="title-text">烟气压力:</div>
            <span class="content-text">
              {{ tab.content.pressure }} {{ pressureUnit }}</span
            >
            <el-select
              v-if="false"
              v-model="tab.content.pressureUnit"
              style="width: 100px; margin-left: 8px"
              class="text-style-select"
              disabled
              ref="selectRef"
              ><el-option
                v-for="item in pressureUnitSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">烟气流量:</div>
            <el-select
              v-if="false"
              v-model="tab.content.quantityFlowUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in quantityFlowUnitSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.quantityFlowType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ quantityFlowType }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ tab.content.quantityFlow }}
            </span></el-col
          >
          <el-col :span="4">
            <span class="content-text">
              {{ quantityFlowUnit }}
            </span></el-col
          >
          <el-col :span="2">
            <div class="title-text">氮氧化物:</div>
            <el-select
              v-if="false"
              v-model="tab.content.noxUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in noxUnitSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.noxType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ noxType }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.nox }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ noxUnit }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ noxOUnit }}
            </span></el-col
          >
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">氧含量:</div>
            <el-select
              v-if="false"
              v-model="tab.content.ounit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.otype"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ oType }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ tab.content.o }}
            </span></el-col
          >
          <el-col :span="4">
            <span class="content-text">
              {{ oUnit }}
            </span></el-col
          >
          <el-col :span="2">
            <div class="title-text">水蒸气含量:</div>
            <el-select
              v-if="false"
              v-model="tab.content.h2oUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.h2oType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ h2oType }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.h2o }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ h2oUnit }}
            </span></el-col
          >
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">二氧化碳:</div>
            <el-select
              v-if="false"
              v-model="tab.content.co2Unit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.co2Type"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ co2Type }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ tab.content.co2 }}
            </span></el-col
          >
          <el-col :span="4">
            <span class="content-text">
              {{ co2Unit }}
            </span></el-col
          >
          <el-col :span="2">
            <div class="title-text">一氧化碳:</div>
            <el-select
              v-if="false"
              v-model="tab.content.coUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.coType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ coType }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.co }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ coUnit }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ noxOUnit }}
            </span></el-col
          >
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">氮气:</div>
            <el-select
              v-if="false"
              v-model="tab.content.n2Unit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.n2Type"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ n2Type }}
            </span>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ tab.content.n2 }}
            </span>
          </el-col>
          <el-col :span="4">
            <span class="content-text">
              {{ n2Unit }}
            </span>
          </el-col>
          <el-col :span="2">
            <div style="color: #355af2; width: 50px">氩气:</div>
            <el-select
              v-if="false"
              v-model="tab.content.ar2Unit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.ar2Type"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ ar2Type }}
            </span>
          </el-col>
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.ar2 }}
            </span>
          </el-col>
          <el-col :span="1">
            <span class="content-text">
              {{ ar2Unit }}
            </span>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div style="color: #355af2; width: 50px">氢气:</div>
            <el-select
              v-if="false"
              v-model="tab.content.h2Unit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in oSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.h2Type"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ h2Type }}
            </span>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ tab.content.h2 }}
            </span>
          </el-col>
          <el-col :span="1">
            <span class="content-text">
              {{ h2Unit }}
            </span>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-show="false">
          <el-col :span="1"> </el-col>
          <el-col :span="2" style="color: #355af2"> VOCs： </el-col>
          <el-col :span="9">
            <el-select
              v-model="tab.content.vocsType"
              style="width: 100px"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            {{ tab.content.vocs }}
            <el-select
              v-model="tab.content.vocsUnit"
              style="width: 100px; margin-left: 8px"
              disabled
              ><el-option
                v-for="item in quantityOtherSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            {{ tab.content.vocsO }}
            <el-select
              v-model="tab.content.vocsOUnit"
              style="width: 100px; margin-left: 8px"
              disabled
              ><el-option
                v-for="item in O2Source"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">二氧化硫:</div>
            <el-select
              v-if="false"
              v-model="tab.content.so2Unit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in so2Source"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.so2Type"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            {{ tab.content.so2O }}
            <el-select
              v-if="false"
              v-model="tab.content.so2OUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in O2Source"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ so2Type }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.so2 }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ so2Unit }}
            </span></el-col
          >
          <el-col :span="3">
            <span class="content-text">
              {{ so2OUnit }}
            </span></el-col
          >
          <el-col :span="2">
            <div class="title-text">三氧化硫:</div>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ so3Type }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.so3 }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ so3Unit }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ so3OUnit }}
            </span></el-col
          >
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px" v-if="false">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">一氧化氮:</div>
            <el-select
              v-if="false"
              v-model="tab.content.noUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in quantityOtherSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.noType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            {{ tab.content.noO }}
            <el-select
              v-if="false"
              v-model="tab.content.noOUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in O2Source"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ noType }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.no }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ noUnit }}
            </span></el-col
          >
          <el-col :span="3">
            <span class="content-text">
              {{ noOUnit }}
            </span></el-col
          >
          <el-col :span="2">
            <div class="title-text">二氧化氮:</div>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ no2Type }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.no2 }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ no2Unit }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ no2OUnit }}
            </span></el-col
          >
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="1"> </el-col>
          <el-col :span="2">
            <div class="title-text">颗粒物:</div>
            <el-select
              v-if="false"
              v-model="tab.content.pmUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in quantityOtherSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            <el-select
              v-if="false"
              v-model="tab.content.pmType"
              class="select-class"
              disabled
              ><el-option
                v-for="item in commonSource"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
            {{ tab.content.pmO }}
            <el-select
              v-if="false"
              v-model="tab.content.pmOUnit"
              class="select-class"
              disabled
              ><el-option
                v-for="item in O2Source"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option
            ></el-select>
          </el-col>
          <el-col :span="2">
            <span class="content-text">
              {{ pmType }}
            </span></el-col
          >
          <el-col :span="1">
            <span class="content-text">
              {{ tab.content.pm }}
            </span></el-col
          >
          <el-col :span="2">
            <span class="content-text">
              {{ pmUnit }}
            </span></el-col
          >
          <el-col :span="5">
            <span class="content-text">
              {{ pmOUnit }}
            </span></el-col
          >
        </el-row>
      </div>
      <slot v-else :name="`pane-${tab.name}`"></slot>
    </el-tab-pane>
  </el-tabs>
  <div v-else class="empty-tips">
    <slot name="empty"> 暂无数据 </slot>
  </div>
</template>

<script setup>
import { ref, computed, watch, defineProps, watchEffect } from "vue";
import request from "@/utils/request";
import { getDicts } from "@/api/system/dict/data";

const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  initialActive: {
    type: String,
    default: "",
  },
});

// 计算是否有有效的tabs数据
const hasTabs = computed(() => {
  return props.tabs && props.tabs.length > 0;
});

// 初始化activeName
const activeName = ref(
  props.initialActive || (hasTabs.value ? props.tabs[0].name : "")
);

//把当前工况是哪个传给父页面
const emit = defineEmits(["updateActiveName"]);
const handleTabChange = () => {
  emit("updateActiveName", activeName.value); // 触发事件并传递值
};

// 监听initialActive变化
watch(
  () => props.initialActive,
  (newVal) => {
    activeName.value = newVal;
  }
);

// 监听tabs变化，确保activeName有效
watch(
  () => props.tabs,
  (newTabs) => {
    if (
      newTabs.length > 0 &&
      !newTabs.some((tab) => tab.name === activeName.value)
    ) {
      activeName.value = newTabs[0].name;
    }
  },
  { deep: true }
);

const pressureUnitSource = ref([]);

const quantityFlowUnitSource = ref([]);

const noxUnitSource = ref([]);

const commonSource = ref([]);

const O2Source = ref([]); //氧气单位

const gasSource = ref([]); //气体单位

const quantityOtherSource = ref([]); //其他气体单位

const parSource = ref([]); //颗粒物单位

const so2Source = ref([]); //二氧化硫单位

const oSource = ref([]);

const so2Unit = ref(""); //二氧化硫单位
const so2Type = ref(""); //二氧化硫类型
const so2OUnit = ref(""); //二氧化硫氧含量单位

const h2Unit = ref(""); //氢气单位
const h2Type = ref(""); //氢气类型

const ar2Unit = ref(""); //氩气单位
const ar2Type = ref(""); //氩气类型

const n2Unit = ref(""); //氮气单位
const n2Type = ref(""); //氮气类型

const coUnit = ref("");
const coType = ref("");
const co2Unit = ref("");
const co2Type = ref("");
const h2oType = ref("");
const h2oUnit = ref("");
const oType = ref("");
const oUnit = ref("");
const noxType = ref("");
const noxUnit = ref("");
const quantityFlowType = ref("");
const quantityFlowUnit = ref("");
const pressureUnit = ref("");
const noxOUnit = ref("");

const so3Unit = ref("");
const so3Type = ref("");
const so3OUnit = ref("");

const noUnit = ref("");
const noType = ref("");
const noOUnit = ref("");

const no2Unit = ref("");
const no2Type = ref("");
const no2OUnit = ref("");

const pmUnit = ref("");
const pmType = ref("");
const pmOUnit = ref("");

function getUnit() {
  getDicts("mstn_pressure_unit").then((response) => {
    pressureUnitSource.value = response.data;
    pressureUnit.value = findUnit("pressureUnit", pressureUnitSource.value);
  });

  getDicts("mstn_ji").then((response) => {
    commonSource.value = response.data;
    so2Type.value = findUnit("so2Type", commonSource.value);
    so3Type.value = findUnit("so3Type", commonSource.value);
    noType.value = findUnit("noType", commonSource.value);
    no2Type.value = findUnit("no2Type", commonSource.value);
    pmType.value = findUnit("pmType", commonSource.value);
    h2Type.value = findUnit("h2Type", commonSource.value);
    ar2Type.value = findUnit("ar2Type", commonSource.value);
    n2Type.value = findUnit("n2Type", commonSource.value);
    coType.value = findUnit("coType", commonSource.value);
    co2Type.value = findUnit("co2Type", commonSource.value);
    h2oType.value = findUnit("h2oType", commonSource.value);
    oType.value = findUnit("h2oType", commonSource.value);
    noxType.value = findUnit("noxType", commonSource.value);
    quantityFlowType.value = findUnit("quantityFlowType", commonSource.value);
  });

  getDicts("mstn_quantity_flow_unit").then((response) => {
    quantityFlowUnitSource.value = response.data;
    quantityFlowUnit.value = findUnit(
      "quantityFlowUnit",
      quantityFlowUnitSource.value
    );
  });

  getDicts("mstn_nox_flow_unit").then((response) => {
    noxUnitSource.value = response.data;
    noxUnit.value = findUnit("noxUnit", response.data);
  });

  getDicts("mstn_o2").then((response) => {
    O2Source.value = response.data;
    so2OUnit.value = findUnit("so2OUnit", O2Source.value);
    so3OUnit.value = findUnit("so3OUnit", O2Source.value);
    noOUnit.value = findUnit("noOUnit", O2Source.value);
    no2OUnit.value = findUnit("no2OUnit", O2Source.value);
    pmOUnit.value = findUnit("pmOUnit", O2Source.value);
    noxOUnit.value = findUnit("noxOUnit", O2Source.value);
  });

  getDicts("mstn_gas_unit").then((response) => {
    gasSource.value = response.data;
  });

  getDicts("mstn_par_unit").then((response) => {
    parSource.value = response.data;
  });

  getDicts("mstn_quantity_flow_unit_other").then((response) => {
    quantityOtherSource.value = response.data;
    so3Unit.value = findUnit("so3Unit", quantityOtherSource.value);
    noUnit.value = findUnit("noUnit", quantityOtherSource.value);
    no2Unit.value = findUnit("no2Unit", quantityOtherSource.value);
    pmUnit.value = findUnit("pmUnit", quantityOtherSource.value);
  });

  //二氧化硫单位
  getDicts("mstn_so2_unit").then((response) => {
    so2Source.value = response.data;
    so2Unit.value = findUnit("so2Unit", so2Source.value);
  });

  //氧含量单位
  getDicts("mstn_o_unit").then((response) => {
    oSource.value = response.data;
    h2Unit.value = findUnit("h2Unit", oSource.value);
    ar2Unit.value = findUnit("ar2Unit", oSource.value);
    n2Unit.value = findUnit("n2Unit", oSource.value);
    coUnit.value = findUnit("coUnit", oSource.value);
    co2Unit.value = findUnit("co2Unit", oSource.value);
    h2oUnit.value = findUnit("h2oUnit", oSource.value);
    oUnit.value = findUnit("ounit", oSource.value);
  });
}

//找到传入的数据以及数据源找到对应的单位
function findUnit(data, dataSource) {
  const values = props.tabs.find((item) => item.name === activeName.value);
  const returntext = dataSource.filter(
    (item) => item.dictValue === values.content[data]
  );
  return returntext ? returntext[0].dictLabel : "";
}

watchEffect(() => {
  if (props.tabs && props.tabs.length > 0) {
    activeName.value = props.tabs[0].name;
    getUnit();
  }
});

// onMounted(async () => {
//   await nextTick(); // 等待父组件的 props 更新
//   if (props.tabs && props.tabs.length > 0) {
//     activeName.value = props.tabs[0].name;
//     getUnit();
//   }
// });
</script>

<style scoped>
.text-style-select :deep(.el-input__wrapper) {
  box-shadow: none;
  background-color: transparent;
  padding-left: 0;
}

.text-style-select :deep(.el-input__suffix) {
  display: none;
}

.text-style-select:hover :deep(.el-input__wrapper) {
  background-color: #f5f5f5;
  cursor: pointer;
}

.text-style-select :deep(.el-input__inner) {
  color: inherit;
  cursor: pointer;
}

.tab-content {
  border: 1px solid #2461ef;
  padding: 10px;
  margin-top: 1px;
}

.form-title {
  font-weight: bold;
}

.form-text {
  margin-left: 5px;
}

.empty-tips {
  padding: 20px;
  text-align: center;
  color: #999;
}

.title-text {
  color: #355af2;
  width: 100px;
}

.select-class {
  width: 100px;
  margin-left: 8px;
}
.content-text {
  color: #727272;
}
</style>
